<template>
    <!--顶部导航栏 start-->
  <ExamMenu />
  <!--顶部导航栏 end-->
    <div class="terms-container">
      <!-- 主标题 -->
      <transition name="title-slide">
        <h1 class="main-title">
          <el-icon><Document /></el-icon>
          服务条款协议
        </h1>
      </transition>
  
      <!-- 内容卡片 -->
      <el-card class="terms-card">
        <!-- 目录导航 -->
        <div class="toc-nav">
          <div 
            v-for="(item, index) in tocList"
            :key="index"
            class="toc-item"
            :class="'toc-level-' + item.level"
            @click="scrollTo(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
  
        <!-- 条款内容 -->
        <div class="terms-content">
          <section id="acceptance">
            <h2>一、接受条款</h2>
            <p>通过访问或使用本平台服务，您表示同意遵守本协议的所有条款...</p>
          </section>
  
          <section id="service-description">
            <h2>二、服务内容</h2>
            <h3>2.1 核心功能</h3>
            <p>我们提供以下教育平台服务：</p>
            <ul>
              <li>考试报名与缴费</li>
              <li>在线监考与防作弊</li>
              <li>成绩查询与证书发放</li>
            </ul>
            
            <h3>2.2 服务变更</h3>
            <p>我们保留随时修改或中断服务的权利...</p>
          </section>
  
          <section id="user-obligations">
            <h2>三、用户义务</h2>
            <p>您同意：</p>
            <ol>
              <li>提供真实准确的注册信息</li>
              <li>遵守考试纪律要求</li>
              <li>不进行任何作弊行为</li>
            </ol>
          </section>
  
          <section id="disclaimer">
            <h2>四、免责声明</h2>
            <p class="warning-text">
              <el-icon><Warning /></el-icon>
              在下列情况下我们不承担责任：
            </p>
            <ul>
              <li>因不可抗力导致的服务中断</li>
              <li>用户不当操作造成的损失</li>
            </ul>
          </section>
  
          <!-- 更多条款... -->
        </div>
      </el-card>
  
      <!-- 操作按钮 -->
      <div class="action-box">
        <el-button 
          type="primary"
          class="confirm-btn"
          @click="handleAccept"
        >
          <el-icon><Checked /></el-icon>
          我已阅读并同意服务条款
        </el-button>
      </div>
    </div>
     <!--底部 start-->
  <ExamFooter />
  <!--底部 end-->
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import {
    Document,
    Warning,
    Checked
  } from '@element-plus/icons-vue'
  import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
  import { ElMessage } from 'element-plus'
  const tocList = ref([
    { id: 'acceptance', title: '接受条款', level: 1 },
    { id: 'service-description', title: '服务内容', level: 1 },
    { id: 'user-obligations', title: '用户义务', level: 1 },
    { id: 'disclaimer', title: '免责声明', level: 1 },
    // 更多目录项...
  ])
  
  const scrollTo = (id) => {
    const el = document.getElementById(id)
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' })
    }
  }
  
  const handleAccept = () => {
    ElMessage.success('协议接受成功')
  }
  </script>
  
  <style lang="scss" scoped>
  // 主题色定义
  @use '@/assets/scss/variables' as *;
  
  .terms-container {
    min-height: 100vh;
    padding: 60px 20px;
    background: linear-gradient(150deg, lighten($primary-color, 42%), #f8f9fa);
  
    .main-title {
      text-align: center;
      color: $primary-color;
      margin-bottom: 40px;
      font-size: 2.4em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      text-shadow: 2px 2px 4px rgba($primary-color, 0.1);
  
      .el-icon {
        font-size: 1.3em;
      }
    }
  
    .terms-card {
      max-width: 1000px;
      margin: 0 auto 30px;
      border-radius: 15px;
      overflow: hidden;
  
      :deep(.el-card__body) {
        display: flex;
        gap: 40px;
        padding: 30px;
      }
  
      .toc-nav {
        width: 220px;
        flex-shrink: 0;
        border-right: 1px solid #eee;
        padding-right: 20px;
  
        .toc-item {
          padding: 8px 12px;
          margin: 6px 0;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s;
          color: #666;
  
          &.toc-level-1 {
            font-weight: 500;
            color: $primary-color;
          }
  
          &:hover {
            background: rgba($primary-color, 0.1);
            transform: translateX(5px);
          }
        }
      }
  
      .terms-content {
        flex: 1;
        counter-reset: section;
  
        section {
          margin-bottom: 40px;
  
          h2 {
            color: $primary-color;
            margin: 25px 0 15px;
            counter-increment: section;
            counter-reset: subsection;
  
            &::before {
              content: counter(section) ". ";
            }
          }
  
          h3 {
            color: darken($primary-color, 10%);
            margin: 20px 0 12px;
            counter-increment: subsection;
            counter-reset: subsubsection;
  
            &::before {
              content: counter(section) "." counter(subsection) " ";
            }
          }
  
          p, ul, ol {
            line-height: 1.8;
            color: #444;
            margin: 10px 0;
          }
  
          ul {
            padding-left: 30px;
            list-style: disc;
  
            li {
              margin: 8px 0;
            }
          }
  
          ol {
            padding-left: 30px;
            list-style: decimal;
  
            li {
              margin: 8px 0;
            }
          }
  
          .warning-text {
            color: $warning-color;
            padding: 12px;
            background: rgba($warning-color, 0.08);
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba($warning-color, 0.2);
  
            .el-icon {
              font-size: 1.2em;
            }
          }
        }
      }
    }
  
    .action-box {
      text-align: center;
      margin-top: 30px;
  
      .confirm-btn {
        padding: 18px 50px;
        font-size: 1.1em;
        letter-spacing: 1px;
        background: linear-gradient(45deg, $primary-color, darken($primary-color, 8%));
        border: none;
        transition: all 0.3s;
  
        &:hover {
          background: linear-gradient(45deg, darken($primary-color, 5%), darken($primary-color, 12%));
          transform: scale(1.05);
          box-shadow: 0 5px 15px rgba($primary-color, 0.3);
        }
  
        .el-icon {
          margin-right: 10px;
          font-size: 1.2em;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .terms-container {
      padding: 40px 15px;
  
      .main-title {
        font-size: 1.8em;
      }
  
      .terms-card {
        :deep(.el-card__body) {
          flex-direction: column;
          padding: 20px;
        }
  
        .toc-nav {
          width: 100%;
          border-right: none;
          border-bottom: 1px solid #eee;
          padding-bottom: 20px;
          margin-bottom: 20px;
        }
      }
  
      .action-box .confirm-btn {
        width: 100%;
        padding: 15px !important;
      }
    }
  }
  
  // 标题动画
  .title-slide-enter-active {
    animation: slideIn 0.8s ease-out;
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  </style>